<template>
  <div class="person">
    <h2>当水温达到60℃或水位达到80cm时，给服务器发请求</h2>
    <h2>当前水温：{{ temp }}℃</h2>
    <h2>当前水位：{{ height }}cm</h2>
    <button @click="changeTemp">水温加10</button>
    <button @click="changeHeight">水位加10</button>
  </div>
</template>

<script setup lang="ts" name="Person">
import { ref, watch, watchEffect } from "vue";

// 数据
let temp = ref(10);
let height = ref(10);

// 方法
function changeTemp() {
  temp.value += 10;
}
function changeHeight() {
  height.value += 10;
}

// watch实现：需要指明监视的属性
/* watch([temp, height], ([newTemp, newHeigth]) => {
  if (newTemp >= 60 || newHeigth >= 80) {
    console.log("给服务器发请求");
  }
}); */

// watchEffect实现,不需要指定监视的属性,不根据监视函数中的属性自动监视
watchEffect(() => {
  if (temp.value >= 60 || height.value >= 80) {
    console.log("给服务器发请求");
  }
});
// 监视回调执行时机:最开始执行一次,监视函数中用到的数据改变时执行
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
li {
  font-size: 20px;
}
</style>
